import React, { useState } from 'react';
import { Row, Col, Grid } from 'antd';
import styles from './index.less';
import { Link, history } from 'umi';
import { Scrollbars } from 'react-custom-scrollbars';

let col = { xs: 0, sm: 0, md: 0, lg: 4, xl: 6, xxl: 5 },
  cols = { xs: 24, sm: 24, md: 24, lg: 20, xl: 18, xxl: 19 };
const { useBreakpoint } = Grid;

let SixBorder = ({ children, active, iconindex, click }) => {
  const [hover, sethover] = useState(false);
  return (
    <div
      onClick={click}
      className={active ? 'activeitem' : 'tabitem'}
      onMouseOver={() => {
        sethover(true);
      }}
      onMouseLeave={() => {
        sethover(false);
      }}
    >
      <img
        src={
          active || hover
            ? require(`@/assets/system/icon_${iconindex}_ac.png`)
            : require(`@/assets/system/icon_${iconindex}.png`)
        }
        alt=""
      />
      {children}
    </div>
  );
};

let BasicLayout = ({ children, location }) => {
  const screens = useBreakpoint(); //screens.sm

  let arr = [
    {
      path: '/system/user',
      name: '用户管理',
      component: './Welcome',
    },
    {
      path: '/system/role',
      name: '角色管理',
      component: './Welcome',
    },
    {
      path: '/system/area',
      name: '区域管理',
      component: './Welcome',
    },
    {
      path: '/system/firec',
      name: '集充消防',
      component: './Welcome',
    },
  ],
    arrs = [
      {
        path: '/system/chasrge',
        name: '集中充电',
        component: './Welcome',
      },
      {
        path: '/system/rfisd',
        name: 'RFID标签',
        component: './Welcome',
      },
      {
        path: '/system/zws',
        name: '电器指纹',
        component: './Welcome',
      },
      {
        path: '/system/sbs',
        name: '电梯识别',
        component: './Welcome',
      },
    ];

  return (
    <div className={styles.container}>
      <Row style={{ height: '100%' }}>
        <Col {...col} style={{ padding: 12 }}>
          <div className={styles.bgblur}>
            <Row className={styles.mainbox}>
              <Col
                span={12}
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'flex-end',
                  justifyContent: 'flex-start',
                  paddingTop: 36
                }}
              >
                {arr.map((it, i) => {
                  return (
                    <SixBorder
                      // eslint-disable-next-line react/no-array-index-key
                      key={i}
                      active={location.pathname.indexOf(it.path) != -1}
                      iconindex={(i + 1).toString()}
                      click={() => {
                        history.push(it.path);
                      }}
                    >
                      {it.name}
                    </SixBorder>
                  );
                })}
              </Col>
              <Col
                span={12}
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'flex-start',
                  justifyContent: 'flex-start',
                  padding: '100px 0 0 0',
                }}
              >
                {arrs.map((it, i) => {
                  return (
                    <SixBorder
                      // eslint-disable-next-line react/no-array-index-key
                      key={i}
                      iconindex={(i + 5).toString()}
                      active={location.pathname.indexOf(it.path) != -1}
                      click={() => {
                        history.push(it.path);
                      }}
                    >
                      {it.name}
                    </SixBorder>
                  );
                })}
              </Col>
            </Row>
          </div>
        </Col>

        <Col {...cols} style={{ padding: 12, paddingLeft: screens.lg ? 0 : 12 }}>
          <Scrollbars
            thumbMinSize={10}
            autoHide
            style={{ width: '100%', height: '100%' }}
            hideTracksWhenNotNeeded={true}
          >
            {children}
          </Scrollbars>
        </Col>
      </Row>
    </div>
  );
};

export default BasicLayout;
